<script setup>

</script>

<template>
  <div class="third-page">
    <div class="text-panel">
      <h1># {{ $t("title2") }}</h1>
      <p>{{ $t("text2") }}</p>
    </div>
    <div class="photo-panel">
      <img src="@\assets\pictures\autoCar.png" class="photo" alt="autoCar" loading="lazy">
    </div>
  </div>
</template>

<style scope>
.third-page {
  display: flex;
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.text-panel {
  position: absolute;
  width: 35%;
  height: 100%;
  padding: 10% 0 0 5%;
  box-sizing: border-box;
}

.text-panel h1 {
  position: relative;
  font-size: 2.5rem;
  color: var(--txcolor);
  margin-bottom: 2rem;
}

.text-panel p {
  position: relative;
  line-height: 2.5;
}

.photo-panel {
  margin: 0;
  background: linear-gradient(155deg, #C8A2E6 0%, #ffaf4d 50%, #FFF5E6 100%);
  width: 60%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
}

.photo {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 800px;
  height: 620px;
  border: 1px solid rgba(5, 247, 239, 0.2);
  box-shadow: 0 0 30px rgba(3, 122, 242, 0.1);
  object-fit: fill;
}
</style>